﻿
        <style>

            /* Demo styles */
            html,body{background:#222;margin:0;}
            body{border-top:4px solid #000;}
            .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;}
            h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
            p{margin:0 0 20px}
            a {color:#22BCB9;text-decoration:none;}
            .cred{margin-top:20px;font-size:11px;}

            /* This rule is read by Galleria to define the gallery height: */
            #galleria{height:320px}

        </style>

        <!-- load jQuery -->
        <script src="js/jquery.js"></script>

        <!-- load Galleria -->
        <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/galleria-1.2.7.min.js"></script>
    <div class="content">
        
        <div id="galleria">
            <?PHP 
            foreach($hinh as $row)
            {
                echo '<a href="'.Yii::app()->request->baseUrl.'/server/php/files/'.$row["id"].'.jpeg">
                <img data-title="<a href=index.php?r=site/viewphoto&id='.$row["id"].'>'.$row["ten_hinh"].'</a>"
                     data-description="'.$row["mo_ta"].'"
                     src="'.Yii::app()->request->baseUrl.'/server/php/files/'.$row["id"].'.jpeg">
                </a>';              
            }
                ?>            
        </div>

        
    </div>
    <script>
    // Load the classic theme
    Galleria.loadTheme('galleria.classic.min.js');
	Galleria.configure({
		fullscreenDoubleTap: true,
		height: window.innerHeight-5,
		width: window.innerWidth-5,
		transition: 'fade'
	});
    // Initialize Galleria
    Galleria.run('#galleria');

    </script>
    <style type="text/css">
        .galleria-thumbnails{margin:0px auto;}
    </style>